<template>
  <v-container
    class="bg-surface-variant mb-6"
  >
    <v-row
      align="end"
      no-gutters
      style="height: 50px;"
    >
      <v-col>
        <v-sheet class="pa-2 ma-2">
          <v-icon icon="mdi-email-open-outline"></v-icon>
          <v-icon icon="mdi-facebook"></v-icon>
          <v-icon icon="mdi-twitter"></v-icon>
        </v-sheet>
      </v-col>

      <v-col>
        <v-sheet class="pa-2 ma-2">
          <div class="center-left">{{"<"}}</div>
          <div class="center-item text-caption">Save 20% use code: BULKSAVE</div>
          <div class="center-right">></div>
        </v-sheet>
      </v-col>

      <v-col>
        <v-sheet class="pa-2 ma-2">
          <span>
              <div>
    <p class="text-body-1">This text is 12px.</p>
    <p class="text-body-2">This text is 14px.</p>
    <p class="text-button">This text is 16px.</p>
    <p class="text-caption">This text is 18px.</p>
    <p class="text-overline">This text is 20px.</p>
  </div>
            </span>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts" setup>

</script>


<style lang="less" scoped>
.bar-black{
  background-color: black !important;
  //.v-toolbar__content{
  //  height: 40px !important;
  //}
  .v-sheet{
    color: #ffffff;
    background-color: black !important;
  }
  .left{
    display: flex;
    justify-content: flex-start;
    .v-icon{
      margin: 7px;
    }
  }
  .right{
    display: flex;
    justify-content: flex-end;
    span{
      font: inherit;
      margin: 7px;
    }
  }
  .center{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    .v-sheet{
      padding: 10px;
      margin: 5px;
    }
    .center-item {
      padding: 10px;
      margin: 5px;
      font-size: 14px;
    }

    /* 最左一个 */
    .center-left {
      margin-right: auto;
    }

    /* 最右一个 */
    .center-right {
      margin-left: auto;
    }
  }
}

</style>
